<template>
  <div id="app" style="padding: 16px;">
    <el-divider content-position="left">模型文件基础信息</el-divider>
    <el-form v-if="form" ref="form" :model="form" label-width="140px">
      <el-row>
        <el-col :span="5" :offset="2">
          <el-form-item label="作者">
            <el-tooltip class="item" effect="dark" :content="form.author" placement="top-start">
              <el-input v-model="form.author" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="邮箱">
            <el-tooltip class="item" effect="dark" :content="form.email" placement="top-start">
              <el-input v-model="form.email"  size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="模块名">
            <el-tooltip class="item" effect="dark" :content="form.model_name" placement="top-start">
              <el-input v-model="form.model_name" @change="changeModelName" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="文件名">
            <el-tooltip class="item" effect="dark" :content="form.file_name" placement="top-start">
              <el-input v-model="form.file_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="模块对象名">
            <el-tooltip class="item" effect="dark" :content="form.model_name_lower_case" placement="top-start">
              <el-input v-model="form.model_name_lower_case" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="创建参数类">
            <el-tooltip class="item" effect="dark" :content="form.schema_create_model" placement="top-start">
              <el-input v-model="form.schema_create_model" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="更新参数类">
            <el-tooltip class="item" effect="dark" :content="form.schema_update_model" placement="top-start">
              <el-input v-model="form.schema_update_model" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="返回参数类">
            <el-tooltip class="item" effect="dark" :content="form.schema_rep_model" placement="top-start">
              <el-input v-model="form.schema_rep_model" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="分页返回参数类">
            <el-tooltip class="item" effect="dark" :content="form.schema_page_rep_model" placement="top-start">
              <el-input v-model="form.schema_page_rep_model" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="模块中文名称">
            <el-tooltip class="item" effect="dark" :content="form.model_name_comment" placement="top-start">
              <el-input v-model="form.model_name_comment" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

      </el-row>
      <el-divider content-position="left">导入包列表</el-divider>
      <el-row>

        <div v-for="(pkg, pkg_index) in form.import_pkg_list" :key="pkg_index">
          <el-col :span="2" style="padding-left: 16px;">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addImportPkg"/>
            <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delImportPkg(pkg_index)"/>
          </el-col>

          <el-col :span="5">
            <el-form-item label="导入位置(from)">
              <el-tooltip class="item" effect="dark" :content="pkg.from" placement="top-start">
                <el-input v-model="pkg.from" size="small"/>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-tooltip class="item" effect="dark" :content="pkg.import" placement="top-start">
              <el-form-item label="导入内容(import)">
                <el-input v-model="pkg.import" size="small"/>
              </el-form-item>
            </el-tooltip>
          </el-col>
        </div>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">生成</el-button>
        <el-button type="danger" @click="resetConfig" size="mini">恢复</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import interfaceObj from '../../api/api'

export default {
  data () {
    return {
      form: null
    }
  },
  mounted () {
    this.resetConfig()
  },
  computed: {
    getAttrOffset () {
      return function (attrIndex) {
        if (attrIndex !== 0) {
          return 12
        }
      }
    }
  },
  methods: {
    addImportPkg () {
      this.form.import_pkg_list.push({
        from: '',
        pkg: ''
      })
    },
    delImportPkg (fieldIndex) {
      if (this.form.import_pkg_list.length === 1) {
        this.$message({
          message: '至少导入一个包'
        })
        return
      }
      this.form.import_pkg_list.splice(fieldIndex, 1)
    },
    changeModelName (content) {
      const wordList = content.match(/[A-Z][a-z]+/g)
      let modelLowerCase = ''
      if (wordList !== null) {
        wordList.forEach((item, index) => {
          if (index !== (wordList.length - 1)) {
            modelLowerCase = modelLowerCase + item.toLowerCase() + '_'
          } else {
            modelLowerCase = modelLowerCase + item.toLowerCase()
          }
        })
        // 修改文件名为模块名称小写
        this.form.file_name = modelLowerCase
        // 修改导入报名中的模块名
        this.form.import_pkg_list.forEach(item => {
          // 导入中的model替换为具体的模块名称，排除models模块
          if (item.from.indexOf('model_class') !== -1) {
            item.from = item.from.replaceAll('model_class', modelLowerCase)
          }
          if (item.import.indexOf('Model') !== -1) {
            item.import = item.import.replaceAll('Model', content)
          }
        })
        // 修改文件名中的模块名
        if (this.form.file_name.indexOf('model') !== -1) {
          this.form.file_name.replace('model', modelLowerCase)
        }
        // 修改模块小写名
        this.form.model_name_lower_case = modelLowerCase
        // 修改创建参数模型
        if (this.form.schema_create_model.indexOf('Model') !== -1) {
          console.log('replace')
          this.form.schema_create_model = this.form.schema_create_model.replace('Model', content)
        }
        // 修改修改参数模型
        if (this.form.schema_update_model.indexOf('Model') !== -1) {
          this.form.schema_update_model = this.form.schema_update_model.replace('Model', content)
        }
        // 修改返回对象参数模型
        if (this.form.schema_rep_model.indexOf('Model') !== -1) {
          this.form.schema_rep_model = this.form.schema_rep_model.replace('Model', content)
        }
        // 修改分页返回对象参数模型
        if (this.form.schema_page_rep_model.indexOf('Model') !== -1) {
          this.form.schema_page_rep_model = this.form.schema_page_rep_model.replace('Model', content)
        }
      }
    },
    onSubmit () {
      this.form.columns = []
      interfaceObj.generateApi(this.form).then(res => {
        console.log(res)
      })
    },
    resetConfig () {
      this.$axios.get('/api_param.json').then(res => {
        this.form = res.data.form
        this.form.author = this.$store.state.author
        this.form.email = this.$store.state.email
        this.form.model_name = this.$store.state.moduleName
      })
    }
  }
}
</script>

<style>

</style>
